<template>
  <!-- 访客记录-详情 -->
  <div>
    <public-modal
      :footer="false"
      :publicVisible="publicVisible"
      cancelContext="取消"
      confirmContext="保存"
      modalStyle="detailModal"
      title="详情页"
      width="1000px"
      @cancel="cancel"
      @handleOk="handleOk"
    >
      <div slot="content">
        <div class="common-title">
          <div class="icon"></div>
          <div class="content">基本信息</div>
        </div>

        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">姓名</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ details.personName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ details.personName || '暂无' }}</div>
              </a-tooltip>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">手机号码</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ details.mobile || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ details.mobile || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">身份证号</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ details.idCard || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ details.idCard || '暂无' }}</div>
              </a-tooltip>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">人员标签</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ details.tagNameList.join(',') || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ details.tagNameList.join(',') || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">身份证照片</div>
              <div class="value common-value click-color cursor" @click="werImg('minImg')">
                点击查看身份证照片
                <img
                  id="minImg"
                  :data-original="`${imgPrefix + details.idCardUrl}`"
                  :src="`${imgPrefix + details.idCardUrl}`"
                />
              </div>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">人脸照片</div>
              <div class="value common-value click-color cursor" @click="werImg('minImg2')">
                点击查看人脸照片
                <img
                  id="minImg2"
                  :data-original="`${imgPrefix + details.personImage}`"
                  :src="`${imgPrefix + details.personImage}`"
                />
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">现居地址</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ details.currentAddress || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ details.currentAddress || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">户籍地址</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ details.residenceAddress || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ details.residenceAddress || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
        </div>

        <div class="common-title">
          <div class="icon"></div>
          <div class="content">可选标签</div>
        </div>

        <a-checkbox-group v-model="tagIdList" style="width: 100%; margin: 20px 10px 0 10px">
          <a-row>
            <a-col v-for="(item, index) in tagList" :key="index" :span="6" style="margin-bottom: 20px">
              <a-checkbox :value="item">{{ item.text }}</a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>

        <div class="common-title" style="margin-bottom: 20px">
          <div class="icon"></div>
          <div class="content">已选标签</div>
        </div>

        <a-tag v-for="(item, index) in tagIdList" :key="index" closable @close.prevent="closeTag(item)">{{
          item.text
        }}</a-tag>
      </div>
    </public-modal>
  </div>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import { postAction } from '@/api/manage'
import publicModal from '@/components/publicModal'
import { comMethods } from '@/mixins/comMethods'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'detailModal',
  components: { publicModal },
  mixins: [comMethods, JeecgListMixin],
  data() {
    return {
      url: {
        list: '/police/jurisdiction/page',
      },
      publicVisible: false,
      details: {},
      imgPrefix: '',
      tagIdList: [],
    }
  },

  methods: {
    async show(records) {
      this.publicVisible = true
      const vList = this.tagList.filter((item) => records.tagIdList.includes(item.value))
      this.tagIdList = [...new Set([...vList])]

      // value.forEach((element) => {
      //   this.vList.push(this.tagList.filter((item) => item.value == element)[0])
      // })
      // this.vList = Array.from(new Set(this.vList))
      // console.log(value, this.vList)
      // this.tagIdList = records.tagIdList
      this.details = records
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: false,
        button: false,
        navbar: false,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },

    closeTag(item) {
      const index = this.tagIdList.findIndex((el) => el.value === item.value)
      if (index !== -1) {
        this.tagIdList.splice(index, 1)
      }
    },

    async handleOk() {
      let data = {
        id: this.details.id,
        tagIdList: this.tagIdList.map(({ value }) => value),
      }
      await postAction('/hotel/work_person/tag', data)
      this.$message.success('标记成功')
      this.$emit('refresh')
      this.publicVisible = false
    },

    cancel(target) {
      this.publicVisible = false
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;
}

img {
  display: none;
}

/deep/ .ant-checkbox-wrapper {
  color: var(--theme-modal-label-value-color);
  .ant-checkbox-inner {
    background: #0b3665;
    border: 1px solid #80b5eb;
  }

  .ant-checkbox-inner::after,
  .ant-checkbox-checked::after {
    border-color: var(--theme-modal-label-value-color);
  }
}

/deep/ .ant-tag {
  // width: 88px;
  height: 34px;
  line-height: 34px;
  margin: 20px;
  margin-top: 0;
  background: #bedeff;
  border-radius: 4px 0px 0px 4px;
  opacity: 1;
  border: none;
  position: relative;

  .anticon-close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    top: -4px;
    right: -34px;
    width: 37px;
    height: 42px;
    background: #1388ff;
    border-radius: 0px 4px 4px 0px;
    opacity: 1;
    border: none;

    font-size: 18px;
    color: #fff;
    &:hover {
      color: #fff;
    }
  }
}
</style>
